<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .wrap {
        width: 500px;
        /* border: 2px solid deeppink; */
        margin: 200px auto;
    }

    #content {
        height: 200px;
        max-width: 300px;
        overflow-y: scroll;
        border: 1px solid deepskyblue;
        font-size: 12px;
        color: #666;
        padding-left: 10px;
    }
</style>

<body>

    <div class="wrap">
        <input type="text" id="nickname" placeholder="输入昵称">
        <button id="connect">连接</button>
        <button id="close">断开</button>
        <div id="content"></div>
        <input type="text" id="msg">
        <button id="send">发送</button>
    </div>
</body>
<script>

    const $ = id => document.getElementById(id);
    //获取dom元素
    let nicknameIpt = $("nickname")
    let closeBtn = $("close")
    let connectBtn = $("connect")
    let content = $("content")
    let chatBox = $("msg")
    let sendBtn = $("send")
    //1.页面刚加载的时候 断开按钮 发送按钮 聊天框都是被禁用的状态
    closeBtn.disabled = true;
    sendBtn.disabled = true;
    chatBox.disabled = true;
    //2.点击连接按钮
    connectBtn.onclick = function () {
        //2.1 禁用连接按钮 禁用nickname输入框
        nicknameIpt.disabled=true;
        connectBtn.disabled = true;
        //2.2 断开按钮 发送按钮 聊天框都要解禁
        closeBtn.disabled = false;
        sendBtn.disabled = false;
        chatBox.disabled = false;
        //2.3 收集昵称输入框中输入的名字 发送给soket服务端
        let nickname = nicknameIpt.value;
        if(!nickname){
            alert("昵称输入不能为空")
            return false
        }
        // console.log(nickname);
        //2.4 建立socket连接
        let ws = new WebSocket("ws://chst.vip:5200");
        ws.onopen = function () {
            console.log('socket连接成功');
            //把昵称发送给sokcet服务器
            ws.send(nickname);

            //接收服务器返回的信息

            ws.onmessage = function (data) {
                console.log(data);
                //需要将服务端返回的数据进行展示
                //展示在content区域
                let p = document.createElement('p');
                p.innerHTML = data.data
                content.appendChild(p)
            }
            ws.onerror = function (err) {
                console.log(err);

            }
        }
        //发送按钮
        sendBtn.onclick = function(){
            //收集chatbox中的内容,发送给websocket服务器
            let msg = chatBox.value;
            ws.send(msg)
            chatBox.value = "";//清空输入的内容
        }
        //断开按钮点击事件
        closeBtn.onclick = function(){
            // alert("正在断开连接...")
            //解禁 nickname输入框 连接按钮
            nicknameIpt.disabled = false;
            connectBtn.disabled = false;
            //禁用 断开按钮 chatBox输入框 发送按钮
            closeBtn.disabled = true;
            chatBox.disabled = true;
            sendBtn.disabled = true;
            //告诉服务器要下线了
            ws.send("close")
            //调用websocket的close方法
            ws.close();
        }

        //websocket的关闭事件

        ws.onclose = function(){
            alert("已经和服务器断开连接")
        }
    }



</script>

</html>